<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">训练报告</block>
    </cu-custom>

    <view style="width: 100%;">
      <view style="width: 100%;text-align: center;">
        <view class="text-overflow" style="width: 100upx;height: 100upx;border-radius: 50upx;font-size: 38upx;line-height: 100upx;background-color: #1CBBB4;margin: 20upx 325upx;">
          {{user.username}}
        </view>
        <view style="font-size: 22upx;">
          {{user.username}}
        </view>
        <view style="font-size: 32upx;margin: 30upx 0;">
          健身目标
        </view>
        <view>
          <text style="font-size: 22upx;background-color: #408CE8;padding: 10upx 10upx;border-radius: 15upx;">健身目标</text>
        </view>
        <view style="display: flex;padding: 0 4%;margin: 40upx 0;">
          <view style="font-size: 24upx;flex: 1;text-align: left;">
            <view>
              健身频率
            </view>
            <view style="margin-top: 20upx;">
              {{obj.trainingFrequency}}次/周
            </view>
          </view>
          <view style="font-size: 24upx;border-left: 1upx solid #666;border-right: 1upx solid #666;flex: 1;">
            <view>
              健身总周期
            </view>
            <view style="margin-top: 20upx;">
              {{obj.trainingCycle}}周
            </view>
          </view>
          <view style="font-size: 24upx;flex: 1;text-align: right;">
            <view>
              健身总次数
            </view>
            <view style="margin-top: 20upx;">
              {{obj.totalNum}}次
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-for="(item, index) in obj.periodList" :key="index" class="item_li">
      <view class="overflow_text" style="font-size: 22upx;line-height: 50upx;">
        {{item.name}}
      </view>
      <view style="font-size: 22upx;line-height: 50upx;">
        训练重点: {{item.trainingPonit}}
      </view>
      <view style="font-size: 22upx;line-height: 50upx;">
        训练项目: {{item.trainingProject}}
      </view>
      <view class="gird_list u-f-ajc">
        <view>
          <view>
            体重记录
          </view>
          <view style="margin-top: 20upx;">
            {{item.weightChange}}kg
          </view>
        </view>
        <view>
          <view>
            体脂变化
          </view>
          <view style="margin-top: 20upx;">
            {{item.bfChange}}%
          </view>
        </view>
        <view>
          <view>
            肌肉变化
          </view>
          <view style="margin-top: 20upx;">
            {{item.muscleChange}}kg
          </view>
        </view>
        <view>
          <view>
            每周频率
          </view>
          <view style="margin-top: 20upx;">
            {{item.periodFrequency}}次/周
          </view>
        </view>
        <view>
          <view>
            阶段周期
          </view>
          <view style="margin-top: 20upx;">
            {{item.periodCycle}}周
          </view>
        </view>
        <view>
          <view>
            阶段次数
          </view>
          <view style="margin-top: 20upx;">
            {{item.periodNum}}次
          </view>
        </view>
      </view>


      <view style="margin: 20upx 0;font-size: 22upx;">
        备注 : {{item.remark ? item.remark : '无'}}
      </view>
    </view>
    <view style="margin: 30rpx 0 30rpx 4%;" class="u-f-ac">
      <view style="width: 80upx;height: 80upx;border-radius: 100%;background-color: #39BB9E;" class="text-overflow u-f-ajc">{{username}}</view>
      <view style="margin-left: 30upx;">
        <view style="font-size: 22upx;">
          {{username}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        username: uni.getStorageSync('userName'),
        user: uni.getStorageSync("phyUser"),
        obj: {},
      }
    },
    onLoad(e) {
      console.log(e.id);
      this.getData(e.id);
    },
    onReady() {

    },
    methods: {
      async getData(id) {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/getTrainingProgramDetail",
          data: {
            trainingProgramId: id,
          },
        })
        console.log(datas)
        this.obj = datas;
      },
      jump(e) {
        console.log(e.currentTarget.dataset.src)
        if (e.currentTarget.dataset.src == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url: e.currentTarget.dataset.src
          });
        }
      },

    }
  }
</script>

<style lang="scss">
  page {
    background-color: #4D525D !important;
    color: #fff;
  }

  .item_li {
    width: 92%;
    margin: 0 0 20rpx 4%;
    background-color: #424451;
    border-radius: 15upx;
    min-height: 450upx;
    padding: 20upx;
  }

  .gird_list {
    flex-wrap: wrap;
    margin: 10rpx 0 0;
    color: #B3B6BF;

    >view {
      font-size: 24upx;
      text-align: center;
      width: 33%;
    }

    >view:nth-of-type(3n+2) {
      border-left: 1upx solid #666;
      border-right: 1upx solid #666;
    }

    >view:nth-of-type(3),
    >view:nth-of-type(2),
    >view:nth-of-type(1) {
      margin-bottom: 50rpx;
    }

  }

  .overflow_text {
    font-size: 22upx;
    line-height: 50upx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
